// 1、【准备】打开网页创建【网页顶部加载进度条】进度10%；
// var nprogress = document.createElement('div')
// nprogress.style.position = 'fixed'
// nprogress.style.top = 0
// nprogress.style.width = '100%'
// nprogress.style.height = '5px'
// nprogress.style.backgroundColor = '#29d'
// document.body.appendChild(nprogress)


// 2、【定时器】定义num变量默认0，每隔10ms ++ 作为【网页顶部加载进度条】进度
// var num=0
// setInterval(function() {
//     num++
//     var nprogress = document.createElement('div')
//     nprogress.style.position = 'fixed'
//     nprogress.style.top = 0
//     // nprogress.style.width = '100%'
//     nprogress.style.width = num+'%'
//     nprogress.style.height = '5px'
//     nprogress.style.backgroundColor = '#29d'
//     document.body.appendChild(nprogress) 
// }, 10)

// 3、【判断】如果【网页顶部加载进度条】已存在直接修改【进度】无需重复创建
// var num=0
// setInterval(function() {
//     num++
//     var nprogress = document.querySelector('.nprogress')

//     if (nprogress) {
//         nprogress.style.width = num+'%'
//     } else {
//         var nprogress = document.createElement('div')
//         nprogress.className = 'nprogress'
//         nprogress.style.position = 'fixed'
//         nprogress.style.top = 0
//         // nprogress.style.width = '100%'
//         nprogress.style.width = num+'%'
//         nprogress.style.height = '5px'
//         nprogress.style.backgroundColor = '#29d'
//         document.body.appendChild(nprogress) 
//     }
// }, 10)

// 4、【判断】进度100%  也就是 【num>=100】则【1-移除DOM】【2-清除定时器】
var num=0
var over = false
var t = setInterval(function() {
    var nprogress = document.querySelector('.nprogress')

    // 优化1：
    if(num>=95 && !over) return
    num++

    if (nprogress) {
        nprogress.style.width = num+'%'
    } else {
        var nprogress = document.createElement('div')
        nprogress.className = 'nprogress'
        nprogress.style.position = 'fixed'
        nprogress.style.top = 0
        // nprogress.style.width = '100%'
        nprogress.style.width = num+'%'
        nprogress.style.height = '5px'
        nprogress.style.backgroundColor = '#29d'
        document.body.appendChild(nprogress) 

        // 优化2：再去搞一个圈圈
        var nprogressRadius = document.createElement('div')
        nprogressRadius.className = 'nprogressRadius'
        document.body.appendChild(nprogressRadius)
    }

    // 后续
    if (num>=110) {
        document.body.removeChild(nprogress)
        clearInterval(t)

        document.body.removeChild(document.querySelector('.nprogressRadius'))
    }
}, 10)

// 5、【优化1】网页未加载完毕，暂停操作进度条

// > 类似于龟兔赛跑
// >
// > 兔子🐰进度>95%就暂停睡觉
// >
// > 乌龟🐢走到重点结束后，兔子再走

// window.onload = function() {
//     over = true
// }



window.addEventListener('load', function(){
    over = true
})

// 6、【优化2】网页右上角增加一个旋转盒模型